<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的点赞</block>
		</cu-custom>
		
		<view class="cu-card case" v-for="(item,index) in navList[0].list" :key="index" @click="toNav('/pages/goods/adopt?post_id=' + item.post_id)">
		    <view class="cu-item shadow">
		        <view class="image">
		            <image :src="item.imageArray[0]" mode="widthFix"></image>
		            <view class="cu-tag bg-blue" v-if="item.type == 1">领养</view>
		            <view class="cu-tag bg-blue" v-if="item.type == 2">救助</view>
		            <view class="cu-tag bg-blue" v-if="item.type == 3">丢失</view>
		            <view class="cu-tag bg-blue" v-if="item.type == 4">帮助</view>
		            <view class="cu-bar bg-shadeBottom">
		                <text class="text-cut">{{ item.content }}</text>
		                <!-- <text class="text-cut">{{ item.city }}</text> -->
		            </view>
		        </view>
		        <view class="cu-list menu-avatar">
		            <view class="cu-item">
		                <view class="cu-avatar round lg" v-if="item.poster.avatar" :style="{'background-image':'url(' + item.poster.avatar + ')'}"></view>
		                <view class="cu-avatar round lg" v-else></view>
		                <view class="content flex-sub">
		                    <view class="text-grey">{{ item.poster.nickname }}</view>
		                    <view class="text-gray text-sm flex justify-between">
		                        {{ item.createtime_text | formatDate }}
		                        <view class="text-gray text-sm">
		                            <text class="cuIcon-attentionfill margin-lr-xs"></text> {{ item.view }}
		                            <text class="cuIcon-appreciatefill margin-lr-xs"></text> {{ item.like.number }}
		                            <text class="cuIcon-messagefill margin-lr-xs"></text> {{ item.replies }}
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <view class="padding flex justify-between">
		            <view>
		                <text class='cuIcon-locationfill text-orange'></text>
		                <text class='text-orange'>{{ item.address }}</text>
		            </view>
		            <view class="text-blue text-sm text-right" v-if="location">距离您当前{{ item.distance.toFixed(2) }}km</view>
		        </view>
		    </view>
		</view>
		<!-- 加载 -->
		<view class="cu-load load-modal" v-if="loadModal">
		    <!-- <view class="cuIcon-emojifill text-orange"></view> -->
		    <image src="/static/logo.png" mode="aspectFit"></image>
		    <view class="gray-text">加载中...</view>
		</view>
        
        <roof></roof>
	</view>
</template>

<script>
    import Roof from '../roof/index.vue';
    import {
        mapState,
        mapActions
    } from 'vuex';
	export default {
		data() {
			return {
				navList: [{
					name: '他的帖子',
					page:1,
					list: [],
                    last_page: 1,
                    refresh: true
				}],
                loadModal: false, //加载
			}
		},
        components: {
            Roof
        },
        onReachBottom() {
            this.getHomeList();
        },
        filters: {
            formatDate(time) {
                return time.substring(0, 10)
            }
        },
        computed: {
        	...mapState(['location'])
        },
		onShow() {
            this.getHomeList(true);
		},
		onHide() {
		},
		onLoad() {
		},
		methods: {
            getHomeList(reset = false) { //获取列表
                if (reset) {
                    this.navList.forEach(e => {
                        e.refresh = true;
                        e.page = 1;
                        e.last_page = 1;
                    })
                }
                console.log(1)
                let navIndex = this.navList[0];
            
                console.log(navIndex.last_page, navIndex.page, navIndex.refresh)
            
                if (this.loadModal) { //防止多次刷新
                    return;
                }
            
                if (navIndex.last_page < navIndex.page && !navIndex.refresh) {
                    //最后一页和当前页面相同就不返回
                    //refresh为false说明已经不是第一次点进去了,满足2个条件只有一种可能,就是没有下一页了
                    uni.showToast({
                        title: '没有更多内容',
                        icon: 'none'
                    })
            
                    return;
                }
                console.log(2)
                this.loadModal = true;
            
                this.$http.post('getHomeList', {
                    request_type:3,
                    limit: 10,
                    page: navIndex.page,
                }).then(res => {
                    navIndex.last_page = res.data.last_page;
                    
                    console.log(navIndex.last_page,navIndex.page)
                    if ( navIndex.page <= navIndex.last_page) {
                        navIndex.page++;
                    }
            
                    if (navIndex.refresh) { //为true表示第一次加载 
                        navIndex.list = res.data.data; //把数据直接放进去 还是清空,前面的数据 刷新用
                        navIndex.refresh = false;
                    } else {
            
                        //不是第一次加载,push进去
                        res.data.data.forEach(e => {
                            navIndex.list.push(e);
                        })
                    }
            
                    this.loadModal = false;
            
                    console.log(navIndex, res.data.data)
                })
            },
			toNav(link) {
				uni.navigateTo({
					url: link
				})
			}
		}
	}
</script>

<style lang="less" scoped>

</style>
